<template>
	<view class="">
		<index-nav @click="selectTab"></index-nav>
		<swiper vertical @change='change'>
			<block v-for="(item, index) in list" :key="index">
				<swiper-item>
					<!-- <video-item :ref="'video'+item.id" :item="item"></video-item> -->
					<video :id="'video'+item.id" class="video" objectFit="cover" loop="true" :src="item.src">
					</video>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			playing:0,
			list: [
				{
					src: '/static/video/1-1.mp4',
					id:1
				},
				{
					src: '/static/video/1-2.mp4',
					id:2
				},
				{
					src: '/static/video/1-3.mp4',
					id:3
				},
				{
					src: '/static/video/1-4.mp4',
					id:4
				},
				{
					src: '/static/video/1-5.mp4',
					id:5
				},
				{
					src: '/static/video/1-6.mp4',
					id:6
				},
				{
					src: '/static/video/1-7.mp4',
					id:7
				},
				{
					src: '/static/video/1-8.mp4',
					id:8
				}
			],
			nowId:''
		};
	},
	onLoad() {
	},
	methods: {
		selectTab(index) {
			console.log(index);
		},
		change(e){
			const now = 'video'+this.nowId
			this.$refs[now].click()
			this.playing = e.detail.current
			const r = 'video' + this.list[this.playing].id
			this.$refs[r].click()
		},
		scroll(res) {
			clearTimeout(timer);
			timer = setTimeout(() => {
				const index = Math.floor((res.detail.scrollTop + 150) / 550);
				this.index = index;
			}, 100);
		}
	}
};
</script>

<style lang="scss">
swiper {
	width: 100vw;
	height: 100vh;
}
.swiper-item {
	color: #ffffff;
}
.video {
	width: 100vw;
	height: 100vh;
	z-index: 19;
	position: relative;
}
</style>
